* {
  margin: 0;
  padding: 0;
}
.d {
  display: flex;
  width: 300px;
  height: 300px;
  background-color: aqua;
  margin: 50px auto;
  align-items: center;
}
.d ul {
  display: flex;
}
.d ul li {
  animation: dh 3s infinite forwards;
  width: 300px;
  height: 300px;
  list-style: none;
}
.d ul li img {
  width: 300px;
  height: 300px;
}
@keyframes dh {
  0% {
    transform: translateX(0px);
  }
  25% {
    transform: translateX(0px);
  }
  50% {
    transform: translateX(-300px);
  }
  75% {
    transform: translateX(-600px);
  }
  100% {
    transform: translateX(-900px);
  }
}
